<template>
	<div class="client">
		<u-search @clear="clear" action-text="筛选" @custom="custom" @search="search" placeholder="请输入客户昵称/手机号搜索" height="90"
			v-model="form.keyword"></u-search>
		<u-tabs :list="navList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<u-empty margin-top="80" v-if="list.length === 0" mode="list"></u-empty>
		<div class="list">
			<div class="item " v-for="item in list" :key="item.id">
				<div class="top">
					<div class="left">
						<u-avatar size="92" :src="item.avatar"></u-avatar>
						<div class="info">
							<div class="top">
								<div class="name">{{ item.name }}</div>
								<div class="title">{{ item.type_name }}</div>
							</div>
							<div class="phone">{{ item.mobile }}</div>
						</div>
					</div>
					<div class="contact" @click="
						connect(
							item.name,
							item.mobile,
							item.id
						)
					">
						联系他/她
					</div>
				</div>
				<div class="bottom">{{ item.sale_time }}</div>
			</div>

		</div>
		<!-- 时间 -->
		<u-calendar v-model="showCalendar" mode="range" @change="changeCalendar"></u-calendar>

		<u-modal v-model="show" @confirm="confirm" show-cancel-button :show-title="false" :content-style="contentStyle"
			:content="content"></u-modal>

		<u-loadmore :status="status" v-if="list.length >= form.page_size" />
		<release-btn></release-btn>
	</div>
</template>

<script>
import { makePhoneCall } from '@/common/utils/index';
import ReleaseBtn from '@/components/ReleaseBtn.vue'
import { mapActions } from 'vuex'
export default {
	components: { ReleaseBtn },
	data() {
		return {
			mode: 'range',
			showCalendar: false,
			status: 'loadmore',
			timeType: 0,
			showTime: false,
			showPopup: false,
			show: false,
			list: [],
			name: '',
			contentStyle: {
				fontWeight: 'bold',
				fontSize: '32rpx',
				color: '#232323',
				padding: '70rpx 0'
			},
			tel: '',
			id: '',
			navList: [
				{
					name: '二手房'
				}, {
					name: '新房'
				}, {
					name: '租房',
				}
			],
			current: 0,
			form: {
				type: 1,
				keyword: '',
				page: 1,
				page_size: 10,
				start_time: "",
				end_time: ""

			},
		};
	},
	computed: {
		content() {
			return `确认联系${this.name}?`;
		}
	},
	onLoad() {

		this.getList();
	},

	methods: {

		custom() {
			this.showCalendar = true
		},
		changeCalendar(e) {
			this.form.start_time = e.startDate
			this.form.end_time = e.endDate
			this.form.page = 1
			this.list = []
			this.getList()
		},
		change(e) {
			this.current = e
			this.form.type = e + 1
			this.form.page = 1
			this.list = []
			this.getList();
		},
		connect(name, tel, id) {
			this.name = name;
			this.tel = tel;
			this.id = id;
			this.show = true;
		},
		confirm() {
			console.log(this.id);
			this.$u.api.contract_customer({ id: this.id }).then(res => {
				console.log(res);
			});
			makePhoneCall(this.tel);
		},
		getList() {
			this.status = 'loading'
			this.$u.api.customer_list(this.form).then(res => {
				if (this.form.page <= res.data.total_page) {
					this.list = [...this.list, ...res.data.data];
					res.data.count <= this.form.page_size ? this.status = 'nomore' : this.status = 'loadmore'
				} else {
					this.status = 'nomore'
				}

			});
		},
		search() {
			this.getList();
		},
		clear() {
			this.form.keyword = '';
			this.getList();
		}
	},
	onPullDownRefresh() {
		this.form.page = 1
		this.list = []
		this.getList()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 800)
	},
	onReachBottom() {
		this.form.page += 1
		this.getList()
	}
};
</script>

<style scoped lang="scss">
.filter {
	padding: 20rpx;

	.title {
		text-align: center;
		font-size: 36rpx;
		color: #333;
	}

	.time {
		margin-top: 40rpx;
		@include flex($aligin: center);

		.line {
			margin: 0 10rpx;
			width: 40rpx;
			height: 3rpx;
			background: #999999;
		}
	}

	.btns {
		margin-top: 200rpx;
		@include flex($aligin: center, $justify: end);

		.u-btn {
			margin: 0;
			margin-left: 20rpx;
		}
	}
}

.client {
	padding: 0 20rpx;
}

.list {
	margin-top: 40rpx;

	.item {

		background: #ffffff;
		padding: 26rpx 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0rpx 2rpx 3rpx 1rpx rgba(0, 0, 0, 0.07);
		border-radius: 10rpx 10rpx 10rpx 10rpx;

		.top {
			@include flex($justify: space-between, $aligin: center);

			.left {
				@include flex($aligin: center);
			}

			image {
				width: 92rpx;
				height: 92rpx;
			}

			.info {
				margin-left: 20rpx;

				.top {
					@include flex($aligin: center);

					.title {
						color: #ffffff;
						background: linear-gradient(91deg, rgb(112, 189, 254) 1%, rgb(68, 144, 255) 99%);
						padding: 5rpx 10rpx;
						margin-left: 20rpx;
						border-radius: 5rpx
					}
				}

				.name {
					font-size: 29rpx;
					color: #232323;
					width: 200rpx;
				}

				.phone {
					margin-top: 10rpx;
					font-size: 27rpx;
					color: #999999;
				}
			}

			.contact {
				height: 64rpx;
				border-radius: 110rpx;
				padding: 0 30rpx;
				background: #ffc13a;
				color: #ffffff;
				line-height: 64rpx;
			}

		}

		.bottom {
			text-align: right;
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}
}
</style>
